
	<template>  

	  <div class="video-page">  

	    <header>  

	      <h1>网易云音乐 视频</h1>  


	      <nav>  

	        <ul>  


	          <li><a href="/discover">发现</a></li>  


	          <li class="active"><a href="#">视频</a></li>  

	        </ul>  

	      </nav>  

	    </header>  

	    <main>  

	      <section class="video-list">  

	        <h2>热门视频</h2>  

	        <div class="video-item" v-for="video in videos" :key="video.id">  

	          <img :src="video.thumbnail" alt="视频缩略图">  

	          <div class="info">  

	            <h3>{{ video.title }}</h3>  

	            <p>作者: {{ video.author }}</p>  

	            <span class="views">观看次数: {{ video.views }}</span>  

	          </div>  

	        </div>  

	      </section>  

	    </main>  

	  </div>  

	</template>  

	  

	<script setup>  

	import { ref } from 'vue';  

	  

	const videos = ref([  

	  { id: 1, title: '农村活宝', author: '瓜嘉鱼', thumbnail: 'https://dingyue.ws.126.net/2019/1104/da6b28aaj00q0gbx2002kc000p000anm.jpg', views: 12345 },  

	  { id: 2, title: '宝中之宝', author: '卡查红', thumbnail: 'https://vsd-picture.cdn.bcebos.com/e83b277c6650d971eaab8db499f3b5f44008ca30.jpg', views: 67890 },  

	  // 更多视频...  

	]);  

	</script>  

	  

	<style scoped>  


	.video-list {  

	  display: flex;  

	  flex-wrap: wrap;  

	  margin: -10px; /* 用于创建网格布局时的间距调整 */  

	}  

	  

	.video-item {  

	  margin: 10px;  

	  width: calc(33.333% - 20px); /* 假设每行显示3个视频 */  

	  box-sizing: border-box;  

	}  

	  

	.video-item img {  

	  width: 100%;  

	  height: auto;  

	  display: block; /* 移除图片下方的默认空白 */  

	}  

	  

	.info {  

	  padding: 10px;  

	  background-color: #f5f5f5;  

	}  

	  

	.info h3 {  

	  margin: 0 0 5px;  

	  font-size: 1.2em;  

	}  

	  

	.info p, .info .views {  

	  color: #666;  

	  font-size: 0.9em;  

	}  

	  

	.views {  

	  display: inline-block;  

	  margin-top: 5px;  

	}  

	</style>